<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <style type="text/css">
            body{
                perspective: 1000px;
            }
            .lifang{
                width: 200px;
                height: 200px;
                position: relative;
                transform-style: preserve-3d;
                margin: 200px auto;
                transform: rotate3d(1,1,1,0deg);
            }
            .lifang:hover{
                transform: rotate3d(1,1,1,720deg);
                transition: all 4s;
            }
            .page{
                width: 200px;
                height: 200px;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0.6;
            }
            .front{
                background-image: url(img/img1.jpg);
                background-size: 100% auto;
                transform: translateZ(100px);
            }
            .back{
                background-image: url(img/img2.png);
                background-size: 100% auto;
                transform: translateZ(-100px);
            }
            .left{
                background-image: url(img/img3.jfif);
                background-size: 100% 100%;
                transform: rotateY(-90deg) translateZ(100px);
            }
            .right{
                background-image: url(img/img4.jpg);
                background-size: 100% 100%;
                transform: rotateY(90deg) translateZ(100px);
            }
            .top{
                background-image: url(img/img5.jpg);
                background-size: 100% 100%;
                transform: rotateX(90deg) translateZ(100px);
            }
            .bottom{
                background-image: url(img/img6.jfif);
                background-size: 100% 100%;
                transform: rotateX(-90deg) translateZ(100px);
            }

        </style>
    </head>
    <body>
            <div class="lifang">
                <div class="page front"></div>
                <div class="page back"></div>
                <div class="page left"></div>
                <div class="page right"></div>
                <div class="page top"></div>
                <div class="page bottom"></div>
            </div>
    </body>
</html>